import React, { Fragment, useState } from 'react'
import { Button, Modal, Input, Typography } from 'antd';
import ReactNbsp from 'react-nbsp'

interface PropsInterface {
  title: string,
  encode: boolean
}

const UrlCom = function (props: PropsInterface) {

  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState('')

  const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(props.encode ? encodeURIComponent(event.target.value) : decodeURIComponent(event.target.value))
  }

  return (
    <Fragment>
      <Button size='small' onClick={() => setVisible(true)} type="primary">{ props.title }</Button>
      <ReactNbsp></ReactNbsp>
      <Modal
        title={ props.title }
        afterClose={ () => setValue('') }
        destroyOnClose
        visible={visible}
        footer={null}
        onCancel={() => setVisible(false)}
      >
        <Input.TextArea onChange={textChange} placeholder='请输入'></Input.TextArea>
        {
          value ?
            <Fragment>
              <br /><br />
              <Typography.Paragraph copyable>{value}</Typography.Paragraph>
            </Fragment>
            :
            null
        }
      </Modal>
    </Fragment>
  )
}

export default UrlCom